<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-11-02 17:33:06
 * @LastEditors: chenju
 * @LastEditTime: 2022-11-15 11:32:10
-->
<template>
  <div>
    <el-tooltip
      v-model:visible="_visible"
      :show-arrow="false"
      :virtual-ref="buttonRef"
      virtual-triggering
      placement="bottom"
      trigger="click"
      :teleported="false"
      popper-class="g-detail-popover-tooltip-wrapper"
      effect="light"
    >
      <template #content>
        <div class="g-detail-popover-container" ref="targetContent">
          <div class="popper-title g-flex-between-center">
            <span class="g-font-14n1b">{{ props.title }}</span>
            <Close class="popper-title-icon" @click="_visible = false" />
          </div>
          <slot></slot>
        </div>
      </template>
    </el-tooltip>
  </div>
</template>

<script lang="ts">
export default {
  name: 'GDetailPopover'
};
</script>
<script lang="ts" setup>
import { computed, withDefaults, defineProps, defineEmits } from 'vue';
import { Close } from '@element-plus/icons-vue';
import { buttonRef } from './useGDetailPopover';

interface GDetailPopoverProps {
  // 显示状态
  visible: boolean;
  // 标题
  title: string;
}
const props = withDefaults(defineProps<GDetailPopoverProps>(), {});
const emits = defineEmits(['update:visible']);
const _visible = computed({
  get: () => {
    return props.visible;
  },
  set: val => {
    emits('update:visible', val);
  }
});
</script>
<style lang="scss" scoped>
.g-detail-popover-container {
  padding: 12px 16px 20px 20px;
  width: 320px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px #f5f9fa, 0px 0px 12px 0px #eceff0;
  border-radius: 4px;
  border: 0;
  > p {
    line-height: 24px;
  }
  .popper-title {
    height: 34px;
    .popper-title-icon {
      color: #d8d8d8;
      cursor: pointer;
      width: 16px;
      height: 16px;
    }
  }
  .popper-btn {
    padding: 0;
    height: 22px;
    line-height: 22px;
  }
}
</style>
<style lang="scss">
.g-detail-popover-tooltip-wrapper.el-popper {
  padding: 0;
  border: none;
  box-shadow: none;
  z-index: 1000 !important;
}
</style>
